<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-05-06 16:08:27
 * @LastEditors: 陈波
 * @LastEditTime: 2024-05-06 20:20:01
 * @Description: 
 * @FilePath: \graDesign\src\views\Tentative\components\SalesInvoice.vue
-->
<template>
  <div class="salesInvoice">
    <table id="table">
      <tr>
        <td rowspan="5" class="commonT">核算主体</td>
        <td rowspan="2" class="commonT">销售方单位名称</td>
        <td rowspan="2" class="commonTd">四川华西绿舍建材有限公司</td>
        <td rowspan="5" class="commonT">开票信息</td>
        <td class="commonT">购买方单位名称</td>
        <td class="commonTd">成都建筑工程公司</td>
      </tr>
      <tr>
        <td>纳税人识别号</td>
        <td>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td rowspan="2">共享项目编码</td>
        <td rowspan="2">HG20045254823094</td>
        <td>单位地址</td>
        <td>
          <el-input v-model="input1" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>银行账号</td>
        <td>
          <el-input v-model="input2" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>责任销售</td>
        <td>
          <el-select v-model="value1" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
        <td>电话号码</td>
        <td>
          <el-input v-model="input3" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <!-- ============================= -->
      <tr>
        <td rowspan="8">累计完成情况</td>
        <td>累计销售量</td>
        <td>实际发货+发货调整-退货+非制造业务汇总(截至到申请时间)</td>
        <td rowspan="8">本次开票情况</td>
        <td>发票类型</td>
        <td>
          <el-select v-model="value2" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
      </tr>
      <!-- 使用v-for -->
      <tr v-for="(item,index) in forArray" :key="index">
        <td>{{ item.label1 }}</td>
        <td>
          <span v-if="item.type1 == 'text'">{{ item.value1 }}</span>
          <div v-else-if="item.type1 == 'input'">
            <el-input v-model="item.value1" placeholder="请输入内容"></el-input>
          </div>
        </td>
        <td>{{ item.label2 }}</td>
        <td>
          <span v-if="item.type2 == 'text'">{{ item.value2 }}</span>
          <div v-else-if="item.type2 == 'input'">
            <el-input v-model="item.value2" placeholder="请输入内容"></el-input>
          </div>
        </td>
      </tr>
      <!-- <tr>
        <td>累计已办销售量</td>
        <td>系统办理结算量</td>
        <td>发票税率</td>
        <td>
          <el-input v-model="input4" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>累计销售产值</td>
        <td>销售量转换为的产值</td>
        <td>货物名称</td>
        <td>
          <el-input v-model="input5" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>累计已经结算额</td>
        <td>系统办理结算金额，含税</td>
        <td>规格型号</td>
        <td>
          <el-input v-model="input6" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>累计回收款</td>
        <td>系统中合同的回款金额合计</td>
        <td>开票数量</td>
        <td>
          <el-input v-model="input7" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>累计尚欠合同款</td>
        <td>
          <el-input v-model="input8" placeholder="请输入内容"></el-input>
        </td>
        <td>开票金额</td>
        <td>
          <el-input v-model="input9" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>累计已开黑</td>
        <td>合同历史已申请且回传了父票的金额</td>
        <td>项目名称</td>
        <td>B3冷库</td>
      </tr>
      <tr>
        <td>合同汇款率</td>
        <td>累计回款额/累计销售产值</td>
        <td>项目地址</td>
        <td>系统获取，多个项目名称‘/’分开</td>
      </tr> -->
      <tr>
        <td>发票备注信息</td>
        <td colspan="5">
          <el-input v-model="input10" type="textarea"></el-input>
        </td>
      </tr>

    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const forArray = reactive([
  // {
  //   totalTitle: '累计完成情况',
  //   rowspan: 8,
  //   itemTitle: '累计销售量',
  // }
  {
    label1: '累计已办销售量',
    type1: 'text',
    value1: '系统办理结算量',
    label2: '发票税率',
    type2: 'input',
    value2: '',
  },
  {
    label1: '累计销售产值',
    type1: 'text',
    value1: '销售量转换为的产值',
    label2: '货物名称',
    type2: 'input',
    value2: '',
  },
  {
    label1: '累计已经结算额',
    type1: 'text',
    value1: '系统办理结算金额，含税',
    label2: '规格型号',
    type2: 'input',
    value2: '',
  },
  {
    label1: '累计回收款',
    type1: 'text',
    value1: '系统中合同的回款金额合计',
    label2: '开票数量',
    type2: 'input',
    value2: '',
  },
  {
    label1: '累计尚欠合同款',
    type1: 'input',
    value1: '',
    label2: '开票金额',
    type2: 'input',
    value2: '',
  },
  {
    label1: '累计已开黑',
    type1: 'text',
    value1: '合同历史已申请且回传了父票的金额',
    label2: '项目名称',
    type2: 'text',
    value2: 'B3冷库',
  },
  {
    label1: '合同汇款率',
    type1: 'text',
    value1: '累计回款额/累计销售产值',
    label2: '项目地址',
    type2: 'text',
    value2: '系统获取，多个项目名称‘/’分开',
  },
])

const handleClick = () => {
  console.log('forArray:', forArray)
}
</script>

<style scoped lang="scss">
$tableWidth: 100%;
$borderColor: #d3d0d0;
$align: center;

.salesInvoice {
  width: 100%;
  #table {
    width: $tableWidth;
    margin: 0 auto;
    border-collapse: collapse; /* 合并边框 */
    font-size: 14px;
    tr {
      td {
        border: 1px solid $borderColor; /* 边框样式 */
        padding: 10px; /* 内边距 */
        text-align: $align; /* 文字居右对齐 */
        &.commonTd {
          width: 20%;
        }
        &.commonT {
          width: 10%;
        }
      }
    }
  }
}
.el-select {
  width: 100% !important;
}
</style>